<template>
  <div>
    <div v-show="list.length > 0">
      <van-list v-model="loading"
        :finished="finished"
        :error.sync="error"
        error-text="请求失败，点击重新加载"
        finished-text=""
        @load="onLoad">
          <div class="list" v-for="item in list" :key="item.id">
            <div class="list-flex border">
              <div class="title">问诊时间：</div>
              <div>{{ item.create_time }}</div>
            </div>
            <div class="list-flex mgt10">
              <div class="title">问诊人：</div>
              <div>{{ item.name }}</div>
            </div>
            <div class="list-flex">
              <div class="title">主诉疾病：</div>
              <div>{{ item.disease }}</div>
            </div>
            <div class="btn-list">
              <van-button round hairline class="btn" @click="goDelete(item.id)">删除</van-button>
              <div class="list-flex">
                <van-button round hairline v-if="item.status == 2" class="btn orange-btn" @click="getResultUrl(item.order_id)">查看处方</van-button>
                <van-button round hairline class="btn white-btn" @click="jumpConsulationUrl(item.order_id)">问诊详情</van-button>
                <van-button round hairline class="btn orange-btn" @click="Jump('order-detail',{id:item.order_id})">订单详情</van-button>
              </div>

            </div>
          </div>
      </van-list>
    </div>
    <no-data :noData="noData" v-if="list.length == 0 && finished"></no-data>
  </div>
</template>
<script>
import { ConsultationLog, ConsultationDelete } from '@/api/dz/dzPrescriptionDrug'
import { medicineUrl, medicineResultUrl } from '@/api/public/index.js'
import { Dialog } from 'vant'
import noData from '@/components/noData/index'
import Store from '@/utils/store'

export default {
  components: {
    noData
  },
  data() {
    return {
      list: [],
      p: 1,
      noData: {
        text: '暂无问诊记录',
        img: 'https://img.wifenxiao.com/h5-wfx/images/user/no_order_data.png',
        marginTop: '1.6rm'
      },
      loading: true,
      finished: false,
      error: false
    }
  },
  mounted() {
    // 小程序触底加载更多
    window.addEventListener('reachbottom', () => {
      this.onLoad()
    })
  },
  created() {
    this.onLoad()
    this.$loadingWrap.show()
  },
  methods: {
    Jump(url, data) {
      this.$JumpName(this, url, data)
    },
    onLoad() {
      ConsultationLog({ p: this.p }).then(res => {
        this.$loadingWrap.close()
        this.loading = false
        if (res.status == 1) {
          if (this.p == 1) {
            this.list = res.data
          } else {
            this.list = this.list.concat(res.data)
          }
          if (res.data.length < 10) {
            this.finished = true
          } else {
            this.p++
          }
        } else {
          this.$Error(res.msg)
        }
      })
    },
    goDelete(id) {
      const params = {
        id: id
      }
      Dialog.confirm({
        title: '删除后不可恢复',
        message: '是否确认删除该条记录',
        className: 'common-confirm',
        closeOnClickOverlay: true
      })
        .then(() => {
          this.$loadingWrap.show()
          setTimeout(() => {
            this.$loadingWrap.close()
          }, 10000)
          ConsultationDelete(params).then(res => {
            this.$loadingWrap.close()
            if (res.status == 1) {
              this.$Error('删除成功')
              this.p = 1
              this.list = []
              this.finished = false
              this.onLoad()
            } else {
              this.$Error(res.msg)
            }
          })
          // on confirm
        })
        .catch(() => {
          // on cancel
        })
    },
    // 问诊
    // 处方药定制 跳转h5问诊
    jumpConsulationUrl(order_id) {
      this.$loadingWrap.show()
      const data = {
        order_id: order_id
      }
      medicineUrl(data).then(res => {
        this.$loadingWrap.close()
        if (res.status == 1) {
          // console.log('awe', res.data)
          // window.location.href = res.data
          let url = res.data 
          Store.saveLocal('webSrc', url)
          this.$JumpName(this, 'webView', {title: '问诊详情'})
        } else {
          this.$Error(res.msg)
        }
      })
    },
    // 获取处方药
    getResultUrl(order_id) {
      this.$loadingWrap.show()
      const data = {
        order_id: order_id
      }
      medicineResultUrl(data).then(res => {
        this.$loadingWrap.close()
        if (res.status == 1) {
          let url = res.data 
          Store.saveLocal('webSrc', url)
          this.$JumpName(this, 'webView', {title: '查看处方'})
        } else {
          this.$Error(res.msg)
        }
      })
    }
  }
}
</script>
<style lang="scss">

.list {
  background-color: #fff;
  border-radius: 10px;
  padding-bottom: 10px;
  margin: 20px;
  .list-flex {
    padding: 20px;
    display: flex;
    font-size: 26px;
    align-items: center;
    .title {
      width: 140px;
      text-align: right;
      text-align-last: justify;
      color: #999;
    }
  }
  .btn-list {
    display: flex;
    justify-content: space-between;
    margin: 20px 0;
    align-items: center;
    .list-flex {
    justify-content: flex-end;
    padding: 0;
    }
    .btn {
      display: inline-block;
      height: 56px;
      // line-height: 54px;
      // border-radius: 50px;
      margin:0 10px;
      padding: 0 30px;
      font-size: 26px;
      color: #333;
      border-color:#999;
      background: #fff;
      // &:first-child{
      //   margin-left:0;
      // }

      &.orange-btn {
        border-color:#F20B22;
        color: #F20B22;
      }

      &.white-btn {
        // border-color:#F20B22;
        // color: #F20B22;
        border-color:#F20B22;
        color: #fff;
        background: #F20B22;
      }
    }
  }
}
.border {
  border-bottom: 1px solid #f5f5f5;
  font-weight: bold;
  .title {
    color: #333!important;
  }
}

</style>